import './OptionsTemp.scss'

import { App } from 'antd'
import { useEffect, useState } from 'react'
import { ColorCallBack, assemblyDataA01 } from '../Utils'
import { LayoutDeftula } from '../Config/LayoutDeftula'


const TestData = [
    { value: '1', label: '分组1' },
    { value: '2', label: '分组2' },
    { value: '3', label: '分组3' },
]

const OptionsTempA01 = ({ config, apiData, TempEvent }) => {
    const { message } = App.useApp()
    // console.log('OptionsTempA01', config, apiData)
    const configuration = config || LayoutDeftula.Options01
    const { params, value, urlList, listType, dataList,
        renderType, align_items, align_content, justify_content, flex_direction, flex_wrap,
        nav_height, nav_padding, nav_margin, nav_backgroun, nav_backgrounDeg, nav_activeBack,
        nav_borderSize, nav_borderType, nav_borderColor, nav_borderActive, nav_borderRadius,
        nav_fill, nav_activeFill, nav_fillDeg, nav_fontSize, nav_fontFamily, nav_fontWeight, nav_fontStyle,
        nav_shadowX, nav_shadowY, nav_shadowS, nav_shadowC,
    } = configuration


    const [Data, setData] = useState([])
    const [Active, setActive] = useState(value || '1')


    const onClick = (e) => {
        if (params) TempEvent.emit({ type: 'onOptionsSwitch', data: { params: { [params]: encodeURIComponent(e) }, urlList } })
        else message.info({ content: '未设置发送参数!', key: 'OptionsTempA02' })
        setActive(e)
    }

    useEffect(() => {
        if (listType) {
            if (listType === 'ApiMapping') {
                console.log('接口列表')
            } else {
                const data = dataList.map(item => ({ label: item.dataMapping, value: item.dataValue }))
                setData(data)
            }
        } else setData(TestData)
    }, [config, apiData])

    const flexStyle = {
        '--alignItems': align_items,
        '--justifyContent': justify_content,
        '--flexDirection': flex_direction,
        '--alignContent': align_content,
        '--flexWrap': flex_wrap,
    }

    const boxStyle = {
        height: nav_height,
        padding: nav_padding.split(',').map(num => num + 'px').join(' '),
        margin: nav_margin.split(',').map(num => num + 'px').join(' '),
        background: ColorCallBack(nav_backgroun, nav_backgrounDeg),
        border: `${nav_borderSize}px ${nav_borderType} ${nav_borderColor}`,
        borderRadius: nav_borderRadius,
        '--BackActive': ColorCallBack(nav_activeBack, nav_backgrounDeg)
    }

    const textStyle = {
        '--background': ColorCallBack(nav_fill, nav_fillDeg),
        fontSize: nav_fontSize,
        fontFamily: nav_fontFamily,
        fontWeight: nav_fontWeight,
        fontStyle: nav_fontStyle,
        filter: `drop-shadow(${nav_shadowX}px ${nav_shadowY}px ${nav_shadowS}px ${nav_shadowC})`,
        '--ColorActive': ColorCallBack(nav_activeFill, nav_fillDeg)
    }

    return (
        <div className='OptionsTempA01'>
            {renderType === 'flex' ?
                <div className='FlexBox' style={flexStyle}>
                    {Data.map(({ label, value }) => {
                        const status = value === Active
                        return (
                            <div
                                key={value}
                                style={boxStyle}
                                onClick={() => onClick(value)}
                                className={status ? 'active' : ''}
                            >
                                <div style={textStyle}> {label} </div>
                            </div>
                        )
                    })}
                </div> :
                <div className='SwiperBox'>
                    swiper
                </div>
            }
        </div>
    );
};

export default OptionsTempA01;